<html>

<head>
  <script type="module" src="../packages/wired-item/lib/wired-item.js"></script>
  <script type="module" src="../packages/wired-card/lib/wired-card.js"></script>
  <script type="module" src="../packages/wired-combo/lib/wired-combo.js"></script>

  <style>
    body {
      margin: 0;
      padding: 10px;
      font-family: sans-serif;
      line-height: 1.5;
    }

    wired-combo {
      margin: 10px;
      --wired-item-selected-bg: darkblue;
    }
  </style>
</head>

<body>
  <wired-combo selected="two">
    <wired-item value="one">Number one</wired-item>
    <wired-item value="two">Number two</wired-item>
    <wired-item value="three">Number three</wired-item>
    <wired-item value="four">Number four</wired-item>
  </wired-combo>
  <wired-combo selected="one" disabled>
    <wired-item value="one">Disabled</wired-item>
    <wired-item value="two">Number two</wired-item>
  </wired-combo>
  <wired-combo>
    <wired-item value="one">Disabled</wired-item>
    <wired-item value="two">Number two</wired-item>
  </wired-combo>

  <div>
    <button>Check</button>
  </div>

  <script>
    document.querySelector('button').addEventListener('click', () => {
      const combos = document.querySelectorAll('wired-combo');
      combos.forEach((c) => {
        console.log(c, c.selected);
      });
    });
  </script>
</body>

</html>